<template>
  <view class="package_sale">
    <view class="column" v-for="(item,index) in userList">
      <view class="top center">
        <text style="top:-25rpx;left:3rpx;" v-if="item.is_main===1" class="first">发起人</text>
        <image :src="item.driver_avatar" mode="" v-if="item.driver_avatar"></image>
        <uni-icons type="plusempty" size="30" v-else></uni-icons>
        <text style="bottom:-5rpx;right:-50rpx;" v-if="item.driver_avatar&&item.status===0" class="first"
          @click="redirectTo('index/filling')">待加注</text>
      </view>
      <view class="moniker" v-if="item.driver_name">{{item.driver_name}}</view>
      <view class="moniker" v-else>虚位以待</view>
      <view style="width:100%;text-align: center;" v-if="item.driver_name">
        <view class="title">加注量（公斤）</view>
        <view class="text">{{item.amount}}</view>
        <view class="title">加注金额（元）</view>
        <view class="text">{{item.money}}</view>
        <view class="title">蓝宝石（个）</view>
        <view class="text">{{item.score}}</view>
      </view>
      <view v-else class="but">邀请好友</view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { navTo, redirectTo } from '@/utils/navigator';
  import { ref } from 'vue';
  const props = defineProps({
    userList: {
      type: Array,
      default: [],
    },
  });
</script>

<style scoped lang="less">
  .package_sale {
    padding-left: 10rpx;
    padding: 20rpx 15rpx 0px;
    display: -webkit-box;
    overflow-x: auto;
    /*适应苹果*/
    -webkit-overflow-scrolling: touch;
  }

  .column:nth-last-child(1) {
    margin-right: 0rpx;
  }

  .column {
    width: 320rpx;
    height: 460rpx;
    background: #ECF1F5;
    margin-right: 15rpx;

    .top {
      width: 91rpx;
      height: 91rpx;
      background: #F4F4F4;
      border: 2px solid #F06E02;
      border-radius: 50%;
      position: relative;
      margin-top: 20rpx;
      justify-content: center;

      .first {
        width: 86rpx;
        height: 32rpx;
        background: linear-gradient(158deg, #F06E02, #F38813);
        border-radius: 15px;
        text-align: center;
        line-height: 30.6rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: #FFFFFF;
        position: absolute;
        z-index: 2;
      }

      image {
        width: 91rpx;
        height: 91rpx;
        border-radius: 50%;
      }
    }

    .moniker {
      max-width: 250rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 5rpx auto 10rpx;
    }

    .title {
      font-size: 24rpx;
      font-weight: 400;
      color: #5D5C5C;
      margin-top: 10rpx;
    }

    .text {
      margin-top: 5rpx;
      color: #289BFF;
    }

    .but {
      width: 220rpx;
      height: 82rpx;
      background: linear-gradient(-24deg, #FD9B00, #F39500);
      border-radius: 41rpx;
      text-align: center;
      line-height: 82rpx;
      color: #fff;
      margin-top: 160rpx;
    }
  }
</style>